<template>
    <div class="index">
        <el-backtop></el-backtop>   <!--回到顶部按钮-->
        <div class="blogs" v-loading="loading_blogs">
            <div v-if="total==0" class="blog" style="font-size: 25px;text-align: center">
                抱歉，暂时没有相关文章呢
                <img width="31px" style="position: relative;top: 6px" src="https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/50.gif">
            </div>
            <!--博客-->
            <div v-for="(blog,key) in blogs" :key="key" class="blog">
                <div class="blog-head">
                    <el-avatar :size="45" :src="blog.userAvatar+'?n='+$store.state.timestamp"></el-avatar>
                    <div>
                        <div class="nickname">{{blog.userNickname}}</div>
                        <div class="created">{{blog.created}}</div>
                    </div>
                </div>
                <div class="blog-cont">
                    <div @click="toBlogDetail(blog.id)"  class="title">{{blog.title}}</div>
                    <div style="margin-bottom: 5px;margin-top: 8px;color: #555666">
                        <span @click="toBlogDetail(blog.id)">{{blog.description}}</span>
                        <span v-if="blog.description.length>200" class="article" @click="toBlogDetail(blog.id)">全文</span>
                    </div>
                    <el-link @click="toBlogDetail(blog.id)">
                        <i class="el-icon-chat-dot-square">
                            <span style="font-size: 15px;margin-left: 3px;opacity:0.8">{{blog.comment}}</span>
                        </i>
                    </el-link>
                    <template v-if="verifyDeleteAuth(blog.userId)">
                        <el-popconfirm title="确定删除吗？" @confirm="deleteBlog(blog.id)">
                            <el-button slot="reference" type="text" class="delete">删除</el-button>
                        </el-popconfirm>
                    </template>
                </div>
            </div>

            <!--分页组件-->
            <div v-if="total>10">
                <el-pagination style="text-align: center;"
                               layout="prev, pager, next"
                               background
                               :total="total"
                               :page-size="pageSize"
                               @current-change="handleCurrentChange('')"
                               :current-page.sync="currentPage">
                </el-pagination>
            </div>
        </div>

        <div class="foot">
            <span>Developed by Zhang Lisong&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
            <a id="a" href="http://beian.miit.gov.cn/" target="_blank">津ICP备2023000580号</a>
            <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
        </div>
    </div>
</template>

<script>
    export default {
        name: "Index",
        data(){
            return{
                blogs:[],
                currentPage: 1,   //页码
                total:1,       //博客总数
                pageSize:10,    //每页条数
                loading_blogs: true    //博客正在加载标志
            }
        },
        methods:{
            handleCurrentChange(search){
                this.$router.replace({query:{...this.$route.query,page:this.currentPage}})
                this.loading_blogs = true;
                this.$axios.get('/blog/blogs?currentPage='+this.currentPage+'&search='+search).then(res=>{
                    this.blogs = res.data.data.records;
                    this.currentPage = res.data.data.current;
                    this.total = res.data.data.total;
                    this.pageSize = res.data.data.size;
                    this.loading_blogs = false;
                })
            },
            toBlogDetail(id){
                this.$router.push({name:'BlogDetail',params:{blogId:id}})
            },
            deleteBlog(blogId){
                if(blogId == 2 || blogId == 1){
                    this.$message.warning('这篇文章不能删除')
                    return
                }

                this.$axios.post("/blog/delete/"+blogId).then(res=>{
                    if(res.data.code == 200){
                        this.$message.success('删除成功')
                        this.handleCurrentChange(this.$route.query.search?this.$route.query.search:'')
                    }
                })
            },
            verifyDeleteAuth(blogUserId){ //判断是都具有删除博客的权限
                if(!this.$store.state.userInfo){
                    return false
                }
                let loginUserId = this.$store.state.userInfo.id
                return loginUserId === blogUserId || loginUserId === 1
            }
        },
        created() {
            this.loading_blogs = true
            if(this.$route.query.page){
                this.currentPage = this.$route.query.page
            }
            let search = ''
            if(this.$route.query.search){
                search = this.$route.query.search
            }
            this.handleCurrentChange(search);
        }
    }
</script>

<style scoped>
    .index{
        max-width: 960px;
        margin: 0 auto;
    }
    .blogs{
        min-height: 82vh;
    }
    .blog{
        border-radius: 4px;
        border: 1px solid #EBEEF5;
        background-color: #FFF;
        overflow: hidden;
        color: #303133;
        margin-bottom: 20px;
        padding: 20px;
        /*box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);*//*盒子阴影*/
        min-height: 100px;
    }
    .blog-head{
        align-items: center;  /*上下居中*/
        display: flex;
        margin-bottom: 10px;
    }
    .nickname{      /*博客作者的昵称*/
        font-size: 14px;
        color: #47292e;
    }
    .created{       /*博客发表时间*/
        margin-top: 3px;
        font-size: small;
        color: rgba(0, 0, 0, 0.5);
    }
    .el-avatar{
        margin-right: 5px;
    }
    .blog-cont{
        position: relative;
        left: 50px;
        padding-right: 70px;
    }
    .title{
        cursor: pointer;
        color: black;
        font-size: 24px;
        font-weight: 500;
    }
    .article{
        color: blue;
        cursor: pointer;
    }
    .delete{
        padding: 0;
        text-decoration: none;
        font-size: 13px;
        margin-left: 20px;
        color: black;
        opacity: 0.8;
    }
    .foot{
        margin: 0 auto;
        font-size: small;
        text-align: center;
        color: rgba(0,0,0,0.5);
        position: relative;
        top: 12px;
    }
    #a{
        text-decoration: none;
        color: rgba(0,0,0,0.5);
    }
</style>
